<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>回顾Object.defineProperty方法</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
     <div id="root">
     </div>
     <script type="text/javascript">
                        // 如果希望number更改时，age也实时更新，不能直接在person中写age属性（因为代码顺序执行完了，除非给person赋值）
        let number=19   // 如果希望number更改时，age也实时更新，通过defineProperty配置get方法
        
        let person={
            name:"张三",
            sex:"男"
        }
        // 在浏览器name，sex是紫色，age是淡紫色（表示不可被枚举）
        Object.defineProperty(person,"age",{
            // value:18,
            // enumerable:true, // 可枚举
            // writable:true, // 可修改
            // configurable:true, // 可删除

            // 当有人读取person的age属性时，get函数（getter）就会被调用，且返回值就是age的值
            get:function 佩奇(){ // 记得把value注释掉
                console.log("有人读取age属性了");
                return number
            },
            // 当有人修改person的age属性时，set函数（setter）就会被调用，且会收到修改的具体值
            set:function 母鸡(value){ //也可以直接set()
                console.log("有人修改了age属性：",value);
                // ！注意，外面看着修改了实际没修改，因为getter发现有人读取时，仍然会return number。所以我们可以number=value
                number=value
            },
        })
        // Object.kes()方法 根据对象的属性名得到一个数组
        console.log(Object.keys(person)) // 此处只打印了 name和sex
        for (let key in person){
            console.log("for:",person[key])
        }
        console.log(person);
     </script>
    <script type="text/javascript">
        Vue.config.productionTip = false
        const vm=new Vue({
            data:{
            }
        })
        vm.$mount("#root")
    </script>
</body>
</html>